<template>
    <div class="tmsGoods-limit">
        <div>
            <el-select
                v-model="goodsLimitData"
                filterable
                remote
                reserve-keyword
                :placeholder="parameter.promptTemplate"
                value-key="goodsCode"
                style="margin-right: 12px"
                :remote-method="arg => remoteMethodGoods(arg, 1)"
                :loading="loadingGoodsLimit"
                :disabled="readonly"
                @change="change('goodsLimit')"
              >
                <el-option v-for="item in goodsList" :key="item.goodsCode" :label="item.goodsCode + item.goodsName" :value="item">
                </el-option>
              </el-select>
        </div>
    </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
export default {
    name: 'tmsGoods',
    props: {
        detail: {
            type: Object,
            default: () => {
                return {}
            } 
        },
        value: [String, Array],
        disabled: Boolean,
        parameter: {
            type: Object,
            default: () => {
                return {}
            } 
        } 
    },
    data(){
        return {
            goodsLimitData: {},
            goodsList: [],
            loadingGoodsLimit: false,
            readonly: false
        }
    },
    created(){
        if(this.value){
            this.setData();
        }
        this.readonly = Boolean(this.$route.query.readonly) || this.disabled;
    },
    methods: {
        setData(){
            let value = JSON.parse(this.value);
            this.remoteMethodGoods({
              goodsCode: value.goodsCode,
              goodsName: value.goodsName
            })
           
        },
        remoteMethodGoods(query, sort) {
            if (query !== '') {
                this.loadingGoodsLimit = true
                nonStandardService
                .searchGoodsPage({
                    goodsKeyword: query.goodsCode ? query.goodsCode : query,
                    pageNum: 1,
                    pageSize: 99999,
                    statusList: [1]
                })
                .then(res => {
                        this.goodsList = res.data.list
                        this.loadingGoodsLimit = false
                        if (query.goodsCode) {
                            this.goodsLimitData = query
                        }
                    })
                } else {
                    this.goodsList = []
                    this.loadingGoodsLimit = false
                }
        },
        getData(){
            return {
                goodsCode: this.goodsLimitData.goodsCode,
                goodsName: this.goodsLimitData.goodsName,
                value: this.goodsLimitData.goodsCode + this.goodsLimitData.goodsName
            };
        },
        change(){
            if(this.goodsLimitData && this.goodsLimitData.goodsCode){
                this.$emit('input',this.goodsLimitData.goodsCode);
            }
        }
    }
}
</script>
<style lang="scss"></style>